<template>
<div>
       <div id="box">
            <span class="iconfont icon-jiantou" @click="gomain"></span>
        </div>
        <div id="i">
            <img src="../../assets/img/3.png" alt="">
        </div>
        <van-form>
            <van-field
                v-model="loginForm.name"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="loginForm.password"
                type="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="login" >
                登录
                </van-button>
            </div>
        </van-form>
        <div class="z">
                <p type="info" @click="reg" >
                注册
                </p>
            </div>
        <fieldset>
            <legend>其他登录方式</legend>
        </fieldset>
</div>
</template>

<script>
import Vue from 'vue';
import { Form,Field,Button,Uploader } from 'vant';
import { Dialog } from 'vant';
import { mapMutations } from 'vuex';
Vue.use(Form);
Vue.use(Button);
Vue.use(Field);
Vue.use(Uploader)
export default {
 data () {
return {
     loginForm: {
        name: "",
        password: "",
      },
}
 },
 mounted () {
  
    this.$store.dispatch('main/setShowBtoNav',false)

},
methods:{
    ...mapMutations(['changeLogin']),
   login () {
       let _this = this
      if (this.loginForm.name === '' || this.loginForm.password === '') {
        alert('账号或密码不能为空');
      } else {
        this.$axios({
          method: 'post',
          url: '/api/login',
          data: _this.loginForm
        }).then(res => {
          this.$axios.post("/api/login", this.loginForm).then(
          (res) => {
            let value = res.data.data.data[0].name;
// res.data.data.data[0].pichead
            localStorage.setItem('getRes',JSON.stringify( value ))
            // 登录成功，保存用户的token信息，token用户的登录状态
            // 答：vuex中存储token  vuex中有缺点，不能刷新，为了解决刷新问题sessionStorages(关闭浏览器数据就消除)
            // 存储vuex中
            this.$store.dispatch("setToken", res.data.data.token);
            // 存储到sessionStorage
            // sessionStorage.setItem('token',res.data.data.token)
             this.$router.push( {path:'/main'} );
            // 跳转到后台界面
            // this.$router.push({ path: "/admin/index" });
          },
          (err) => {
            // 登录失败
            this.$message.error("账号或密码有误");
          }
        );
          alert('登陆成功');
        }).catch(error => {
          alert('账号或密码错误');

        });
      }
    },

     gomain(){
        this.$router.push('/center')
    } ,
    reg(){
      this.$router.push({path:'/reg'})
    }
}
}

</script>

<style scoped lang="scss">
#box{
    width:100%;
    height: 1.17333rem;
    line-height: 1.17333rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
#i{
    display: block;
    width: 4.26667rem;
    height: 1.34667rem;
    margin: 0.76rem auto 0.90667rem;
    img{
        width:100%;
        height:100%;
    }
}
fieldset{
    border: none;
    border-top:1px solid gray;
    text-align: center;
    margin-top:20px;
}
legend{
    margin:0 5px;
}
.z{
  width:1.6rem;
margin-left:75%;
}
</style>
